<%= render 'cms/cis/ci', :ci => @assembly, :f => f %>

<% if @catalog_designs.present? %>
  <div class="category">
    <div class="name">Catalog</div>
    <div class="control-group">
      <label for="catalog_template" class="control-label">Select Design</label>
      <div class="controls">
        <%= design_id = params[:catalog_template].to_i
            select_tag(:catalog_template, options_for_select(@catalog_designs.map {|t| ["#{t.ciName} (#{t.ciAttributes.description})", t.ciId]}, design_id), :prompt => 'None', :class => 'select-xlarge') %>
      </div>
      <br/>
      <div id="diagram_carousel" class="carousel">
        <div class="carousel-inner">
          <div class="item <%= 'active' unless @catalog_designs.map(&:ciId).include?(design_id) %>">
            <object class="diagram"></object>
            <div class="carousel-caption">
              <h4>None</h4>
              <p>No design is selected.</p>
            </div>
          </div>
          <% @catalog_designs.each do |c| %>
            <div class="item <%= 'active' if design_id == c.ciId %>" data-design-id="<%= c.ciId %>">
              <%= content_tag(:object, '', :data => diagram_catalog_design_path(c), :class => 'diagram') %>
              <div class="carousel-caption">
                <h4><%= c.ciName %></h4>
                <p><%= c.ciAttributes.description %></p>
              </div>
            </div>
          <% end %>
        </div>
        <a class="carousel-control left"  href="#diagram_carousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#diagram_carousel" data-slide="next">&rsaquo;</a>
      </div>
    </div>
  </div>
<% end %>

<script type="text/javascript">
  var design_id_to_index_map = {'': 0};
  <% @catalog_designs.each_with_index do |c, i| %>
    design_id_to_index_map['<%= c.ciId %>'] = <%= i + 1 %>;
  <% end %>

  window.update_carousel = function(design_id) {
    $j(".carousel").carousel(design_id_to_index_map[design_id]);
  };

  $j(function() {
    $j(".carousel").carousel({interval: 1000000000});

    $j("#catalog_template").change(function() {
      update_carousel(this.value);
    });

    $j(".carousel").bind('slid', function() {
      $j("#catalog_template").val($j(".carousel").find('.active')[0].getAttribute("data-design-id"));
    });
  });
</script>

<%= render 'base/shared/teams_to_manage_access', :ci => @assembly %>
